<template>
    <div ref="myControl" class="my-custom-control">
      <!-- 控件的HTML内容 -->
      <button @click="onClick">我的控件</button>
    </div>
  </template>
   
  <script>
  import 'ol/ol.css';
//   import { Map, View } from 'ol';
//   import TileLayer from 'ol/layer/Tile';
//   import OSM from 'ol/source/OSM';
//   import VectorLayer from  'ol/layer/Vector';
//   import VectorSource from 'ol/source/Vector';
//   import { fromLonLat } from 'ol/proj';
  import Control from 'ol/control/Control';
   
  export default {
    name: 'MapComp',
    props: {
      map: Object,
      position: String
    },
    methods: {
      onClick() {
        console.log('控件被点击！');
      }
    },
    mounted() {
      const element = this.$refs.myControl;
      this.control = new Control({
        element: element,
        target: this.position || 'top-right'
      });
      this.map.addControl(this.control);
    },
    beforeDestroy() {
      if (this.control) {
        this.map.removeControl(this.control);
      }
    }
  };
  </script>
   
  <style>
  .my-custom-control button {
    /* 控件的CSS样式 */
    cursor: pointer;
    /* 其他样式 */
  }
  </style>